<!DOCTYPE html>
<html>

<head>
    <title>Graph Browser</title>
    <meta charset="utf-8">
    <style type="text/css">
        ctrl-panel {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
        }

        filter-panel {
            width: 90%;
            float: left;
        }

        help-panel {
            width: 10%;
            float: left;
        }

        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
            background-color: aliceblue;

            width: 400px;
            visibility: hidden;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;

            /* 定位 */
            position: absolute;
            z-index: 1;
            top: -5px;
            right: 105%;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }

        html,
        body {
            height: 100%;
        }
    </style>
</head>

<body style='overflow:-Scroll;overflow-y:hidden'>
    <div id="container" style="height: 100%;"></div>
    <ctrl-panel>
        <filter-panel>
            <input type="button" value="Open" onclick="openGraphData()"></button><br>
            Include:<input id="includeContent" type="text" onkeydown="checkEntry(event, refreshNodes)"
                style="width: 250px">
            Exclude:<input id="excludeContent" type="text" onkeydown="checkEntry(event, refreshNodes)"
                style="width: 250px">
            <input type="button" value="Filter" onclick="refreshNodes()"><br>
            High Light:<input id="highLightContent" type="text" onkeydown="checkEntry(event, refreshHighLightNodes)"
                style="width: 250px">
            <input type="button" value="High Light" onclick="refreshNodes()"><br>
            <input type="file" style="display:none" id="i-for-upload">
        </filter-panel>
        <help-panel>
            <div class="tooltip">(?)
                <table border="1" class="tooltiptext">
                    <tr>
                        <th>关系名称</th>
                        <th>说明</th>
                        <th>样式</th>
                    </tr>
                    <tr>
                        <td>inherit</td>
                        <td>继承关系</td>
                        <td>实线，三角箭头</td>
                    </tr>
                    <tr>
                        <td>member</td>
                        <td>成员、组成关系</td>
                        <td>实线，箭头</td>
                    </tr>
                    <tr>
                        <td>reference</td>
                        <td>引用关系</td>
                        <td>虚线，箭头</td>
                    </tr>
                    <tr>
                        <td>unknown</td>
                        <td></td>
                        <td>点虚线，箭头</td>
                    </tr>
                    <tr>
                        <td colspan="3">过滤条件中关键词可以用分号(;)隔开</td>
                    </tr>
                </table>
            </div>
        </help-panel>
    </ctrl-panel>

    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->
    <script type="text/javascript" src="libs/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="libs/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="libs/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="libs/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="libs/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="libs/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="libs/echarts/dist/extension/bmap.min.js"></script>
    <script type="text/javascript" src="graph-browser.js"></script>
</body>

</html>